import React, { useState, useEffect } from "react";
import { Table, Button, Modal, notification } from "antd";
import axios from "axios";
import { NavLink } from "react-router-dom";
import {
  UnorderedListOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
  UploadOutlined,
} from "@ant-design/icons";
import { useNavigate } from "react-router";
export default function NewsDraft(props) {
  const navigate = useNavigate();
  const [dataSource, setdataSource] = useState([]);
  const handleCheck = (item) => {
    axios.patch(`/news/${item.id}`, { auditState: 1 }).then((res) => {
      notification.open({
        message: "提示",
        description: `可以到审核列表中查看您的新闻`,
      });
      navigate("/audit-manage/list");
    });
  };
  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      render(id) {
        return <b>{id}</b>;
      },
    },
    {
      title: "新闻标题",
      dataIndex: "title",
      render(title, item) {
        return (
          <NavLink className="navLink" to={`/news-manage/preview/${item.id}`}>
            {title}
          </NavLink>
        );
        // return <a href={`#/news-manage/preview/${item.id}`}>{title}</a>;
      },
    },
    {
      title: "作者",
      dataIndex: "author",
    },
    {
      title: "新闻分类",
      dataIndex: "category",
      render(category) {
        return category.title;
      },
    },
    {
      title: "操作",
      render(item) {
        return (
          <div>
            <Button
              danger
              shape="circle"
              onClick={() => {
                confirmMethod(item);
              }}
              icon={<DeleteOutlined />}
            />

            <Button
              type="primary"
              shape="circle"
              icon={<UnorderedListOutlined />}
              onClick={() => {
                navigate(`/news-manage/update/${item.id}`);
              }}
            />
            <Button
              type="primary"
              shape="circle"
              icon={<UploadOutlined />}
              onClick={() => {
                handleCheck(item);
              }}
            />
          </div>
        );
      },
    },
  ];

  const deteleMethod = (item) => {
    setdataSource(dataSource.filter((data) => data.id !== item.id));
    // axios.get(`/news/${item.id}`).then((res) => {});
  };
  const confirmMethod = (item) => {
    Modal.confirm({
      title: "你确定要删除吗？",
      icon: <ExclamationCircleOutlined />,
      okText: "确认",
      cancelText: "取消",
      onOk: () => {
        deteleMethod(item);
      },
    });
  };
  const { username } = JSON.parse(localStorage.getItem("token"));
  useEffect(() => {
    axios
      .get(`/news?author=${username}&auditState=0&_expand=category`)
      .then((res) => {
        console.log(res.data);
        setdataSource(res.data);
      });
  }, [username]);

  return (
    <div>
      <h1 style={{ fontWeight: "bold" }}>草稿箱</h1>
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={{ pageSize: 5 }}
        rowKey={(item) => item.id}
      />
    </div>
  );
}
